<template>
	<view>
	<view class="page-section page-section-gap">
		<map style="width: 100%; height: 168upx;" :latitude="latitude" :longitude="longitude" :markers="markers">
		</map>
	</view>
	</view>
</template>

<script>
	export default {
		onLoad(){
			const _this = this;
			uni.getSystemInfo({
				success: (res) => {
					_this.mapHeight = res . screenHeight - res.statusBarHeight
					_this.mapHeight = _this.mapHeight
				}
			})
		},
		props:{
			lon:{
				type:String,
				default:'0'
			},
			lan:{
				type:String,
				default:'0'
			}
		},
	    data() {
	        return {
				id:0, // 使用 marker点击事件 需要填写id
	            title: 'map',
	            latitude: this.lat,
	            longitude: this.lon,
				circles: [],
	            markers: []
	        }
	    },
	    methods: {
	        //   初次位置授权
	        getAuthorize() {
	          return new Promise((resolve, reject) => {
	            uni.authorize({
	              scope: "scope.userLocation",
	              success: () => {
	                resolve(); // 允许授权
	              },
	              fail: () => {
	                reject(); // 拒绝授权
	              },
	            });
	          });
	        },
	        // 确认授权后，获取用户位置
	        getLocationInfo() {
	          const that = this;
	          uni.getLocation({
	            type: "wgs84",
	            success: function (res) {
	              // 暂时
	              that.longitude = res.longitude; //118.787575;
	              that.latitude = res.latitude; //32.05024;
				  console.log(that.longitude)
	              that.markers = [
	                {
	                  id: 1,
	                  latitude: res.latitude,
	                  longitude: res.longitude,
					  iconPath: "../../static/dw.jpg",
						// width: that.markerHeight, //宽
	     //              height: that.markerHeight, //高
	                }
	              ];
				  that.circles = [{
					  latitude: res.latitude,
					  longitude:res.longitude,
					  fillColor:"#D9E6EF",
					  color:"#A7B6CB",
					  radius:50,
					  strokeWidth:2
				  }]
	              that.getList();
	            },
	          });
	        },
	        // 拒绝授权后，弹框提示是否手动打开位置授权
	        openConfirm() {
	          return new Promise((resolve, reject) => {
	            uni.showModal({
	              title: "请求授权当前位置",
	              content: "我们需要获取地理位置信息，为您推荐附近的美食",
	              success: (res) => {
	                if (res.confirm) {
	                  uni.openSetting().then((res) => {
	                    if (res[1].authSetting["scope.userLocation"] === true) {
	                      resolve(); // 打开地图权限设置
	                    } else {
	                      reject();
	                    }
	                  });
	                } else if (res.cancel) {
	                  reject();
	                }
	              },
	            });
	          });
	        },
	        // 彻底拒绝位置获取
	        rejectGetLocation() {
	          uni.showToast({
	            title: "你拒绝了授权，无法获得周边信息",
	            icon: "none",
	            duration: 2000,
	          });
	        },
	        getList() {
	          console.log("获取周围美食");
	        },
	      },
	      onReady() {
	        //   wx请求获取位置权限
	        this.getAuthorize()
	          .then(() => {
	            //   同意后获取
	            this.getLocationInfo();
	          })
	          .catch(() => {
	            //   不同意给出弹框，再次确认
	            this.openConfirm()
	              .then(() => {
	                this.getLocationInfo();
	              })
	              .catch(() => {
	                this.rejectGetLocation();
	              });
	          });
	      },
	}
</script>

<style>
</style>
